<template>
    <div>
        <!-- 头部 -->
        <van-nav-bar left-arrow>
            <template #title>
            <van-field
                v-model="keyword"
                left-icon="search"
                placeholder="请搜索关键词"
            />
            </template>
            <template #right>
                <span @click="searchFn">搜索</span>
            </template>
        </van-nav-bar>
        <!-- 历史记录 -->
        <div class="list">
            <h1>历史记录</h1>
            <ul class="history">
                <li @click="hsearchFn(item)" v-for="(item,index) in historyList" :key="index">{{ item }}</li>
            </ul>
        </div>
        <!-- 搜索结果 -->
        <div class="list">
            <h1>搜索结果</h1>
            <ul class="result">
                <li @click="goDetail(item.id)" v-for="item in list" :key="item.id" 
                v-html="item.title.replace(keyword,`<span style=color:red>${keyword}</span>`)"></li>
            </ul>
        </div>
    </div>
</template>

<script>
import { post_search } from "@/api/news.js"
export default {
    data(){
        return {
            keyword: "",
            list: [],       // 搜索结果
            historyList: [], // 历史搜索记录
        }
    },
    created(){
        //从缓存中获取历史搜索记录，设置historyList数组的初始值
        let hList = localStorage.getItem("historyList");
        if(hList){
            this.historyList = JSON.parse(hList);
        }
        
    },
    methods: {
        // 点击历史记录进行搜索
        hsearchFn(val){
            this.keyword = val;
            this.searchFn();
        },
        // 搜索
        searchFn(){
            // 在把关键词保存进搜索历史记录之前可以先判断，历史记录数组中存不存在该关键词
            // 如果存在，则不需要添加关键词进入数组中，如果不存在则需要
            if(this.historyList.indexOf(this.keyword) == -1 ){
                // 保存搜索关键词
                this.historyList.push(this.keyword);
                // 缓存历史搜索记录
                localStorage.setItem("historyList", JSON.stringify(this.historyList))
            }

            // 搜索结果
            post_search({
                keyword: this.keyword
            }).then(res=>{
                console.log(53,res);
                this.list = res.data.data;
            })
        },
        // 跳转到文章详情页面
        goDetail(id){
            this.$router.push({
                path: "/articleDetail",
                query: {
                    id
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar{
    .van-field{
        background-color: #f7f8fa;
        border-radius: 20px;
        height: 36px;
        line-height: 16px;
    }
    .van-icon{
        color: #000;
    }
}
.list{
    padding: 30px 10px 20px 10px;
    h1{
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .history{
        line-height: 1.5;
        font-size: 18px;
        // text-decorate: underline;
    }
    .result{
        li{
            line-height: 1.5;
            text-decoration: underline;
            font-size: 18px;
            color: #666;
        }
    }
}
</style>